<template>
    <div class="add_container">
        <HeaderTop :goBack="true" :headTitle="'新增地址'"></HeaderTop>
        <section class="adddetail">
            <form @click.prevent>
                <section class="ui-padding-block">
                    <div class="input_new">
                        <input type="text" placeholder="请填写姓名" :class="{verifies:verify}" v-model="message" @input="inputThing">
                        <p v-if="verify">请填写您的姓名</p>
                    </div>
                    <router-link class="add_detail" to="/profile/info/address/add/addDetail">
                        <div class="input_new">
                            <input type="text" placeholder="小区/写字楼/学校等" readonly="readonly" v-model="addAddress">
                        </div>
                    </router-link>
                    <div class="input_new">
                        <input type="text" placeholder="详细地址" :class="{verifies:verifythree}" v-model="mesthree" @input="inputThingthree">
                        <p v-if="verifythree">{{sendaddress}}</p>
                    </div>
                    <div class="input_new">
                        <input type="text" placeholder="收货手机号" :class="{verifies:verifyfour}" v-model="telenum" @input="inputThingfour">
                        <p v-if="verifyfour">{{telephone}}</p>
                    </div>
                    <div class="input_new">
                        <input type="text" placeholder="备用手机号(选填)" v-model="standbytelenum" @input="inputThingfive">
                        <p v-if="verifyfive">{{standbytele}}</p>
                    </div>
                </section>
                <section class="addbutton">
                    <button :class="{butopacity:butpart}" @click.prevent="submitThing">新增地址</button>
                </section>
            </form>
        </section>
        <transition name="route-slide">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import HeaderTop from '@src/components/header/HeaderTop';
import {postAddAddress} from '@src/api/getData'
import {mapState, mapActions} from 'vuex'
export default {
    components:{
        HeaderTop
    },
    computed:{
        ...mapState(['addAddress','user','geohash'])
    },
    data(){
        return {
            message:'',
            mesthree:'',
            telenum:'',
            standbytelenum:'',
            verify:false,			//姓名
            verifytwo:false,		//备注
            verifythree:false,		//地址
            verifyfour:false,		//电话
            verifyfive:false,		//备用电话
            butpart:false,			//新增地址按钮的透明度
            sendaddress:'',         //地址
            telephone:'',           //手机号
        }
    },
    methods:{
        ...mapActions(['saveAddress']),
        async submitThing(){
            let res =  await postAddAddress(this.user.user_id, this.mesthree, this.addAddress, this.geohash, this.message, this.telenum, this.standbytelenum, 0, 1, '公司', 4);
            if(res.message){
                alert(res.message);
            }else{
                this.saveAddress({
                    name: this.message,
                    address: this.mesthree,
                    address_detail: this.addAddress,
                    geohash: 'wtw37r7cxep4',
                    phone: this.telenum,
                    phone_bk: this.standbytelenum,
                    poi: this.addAddress,
                    poi_type: 0,
                });
                this.$router.go(-1);
            }

        },
        // 姓名
        inputThing(){
            !this.message ? this.verify=true:this.verify=false;
            this.bindThing();
        },
        // 详细地址
        inputThingthree(){
            this.verifythree=true;
            if(this.mesthree.length ===0){
                this.sendaddress='请输入详细地址'
            }else if(this.mesthree.length<5){
                this.sendaddress='地址太短了，不能识别'
            }else{
                this.sendaddress='';
                this.verifythree=false;
            }
            this.bindThing();
        },
        // 手机号
        inputThingfour(){
            this.verifyfour=true;
            if(this.telenum.length === 0){
                this.telephone='手机号不能为空'
            }else if(this.telenum.length<11){
                this.telephone='请输入11位手机号'
            }else if(/^1[3-9][0-9]{9}$/.test(this.telenum)){
                this.verifyfour=false;
            }else{
                this.telephone="请输入正确的手机号"
            }
            this.bindThing();
        },
        // 备用手机号
        inputThingfive(){
            this.verifyfive = true;
            if(/^[1][358][0-9]{9}$/.test(this.standbytelenum) || this.standbytelenum == ''){
                this.verifyfive=false;
            }else{
                this.standbytele="请输入正确的手机号"
            }
            this.bindThing();
        },
        bindThing(){
            if(this.message && this.mesthree && !this.verifyfour){
                this.butpart=true;
            }else{
                this.butpart=false;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.add_container{
    padding-top: 2.1rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 204;
    background: #F5F5F5;
}
.ui-padding-block{
    background: #fff;
    padding-top: 0.4rem;
    .input_new{
        padding-bottom: 0.4rem;
        input{
            display: block;
            width: 15rem;
            font-size: 0.6rem;
            margin: 0 auto;
            background: #F2F2F2;
            border: 0.025rem solid #ddd;
            padding: 0.3rem;
            border-radius: 3px;
            &.verifies{
                border-color: #ea3106;
            }
        }
        p{
            @include sc(0.5rem,#ea3106);
            padding: 0 0.5rem;
            margin-top: 0.2rem;
        }
    }
}
.addbutton{
    margin: 0.6rem auto;
    width: 15rem;
    background: #4cd964;
    border-radius: 3px;
    button{
        width: 100%;
        background: none;
        @include sc(0.6rem,#fff);
        line-height: 1.6rem;
        font-weight: 700;
        opacity: 0.6;
        &.butopacity{
            opacity: 1;
            transition: all 0.3s;
        }
    }
}
.route-slide-enter,
.route-slide-leave-to
{
    transform: translateX(4rem);
    opacity: 0;
}
.route-slide-enter-active,
.route-slide-leave-active{
    transition: all 0.3s ease-in-out;
}
</style>